<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/default.css">
	<link rel="stylesheet" type="text/css" href="css/component.css" />
<title></title>  
<style>
body{
	text-align:center;
}
.sty1 {  
	border: 2px inset;
}
.sty2 {  
	border-style: outset;
}
.juzhong{
	margin:0 auto;	
	width:300px;
	height:auto;
	}
#zhong{margin:0 auto;}
a:visited {
	background-color: #00FF00;
}
tr{
	margin:5px 0;
	}
input,p,font{
	font-size:2.5em;
	}
</style>
</head>  
<body id="main"> 
<nav class="menu menu--alonso">
				<ul class="menu__list zhong">
					<li class="menu__item menu__item--current"><a class="menu__link" onclick="setOp('+', '计算结果');"/>周一至周五</a></li>
					<li class="menu__item"><a class="menu__link" onclick="setOp('-', '计算结果');"/>周一至周日</a></li>
					<li class="menu__item"><a class="menu__link" onclick="setOp('*', '计算结果');"/>周六+周日</a></li>
					<li class="menu__item"><a class="menu__link" onclick="setOp('/', '计算结果');"/>空</a></li>
					<li class="menu__item"><a class="menu__link" onclick="setOp('/', '计算结果');"/>空</a></li>
					<li class="menu__line"></li>
				</ul>
</nav>

	
	<script src="js/classie.js"></script>
	<script src="js/clipboard.min.js"></script>
	<script>
		(function() {
			[].slice.call(document.querySelectorAll('.menu')).forEach(function(menu) {
				var menuItems = menu.querySelectorAll('.menu__link'),
					setCurrent = function(ev) {
						ev.preventDefault();

						var item = ev.target.parentNode; // li

						// return if already current
						if( classie.has(item, 'menu__item--current') ) {
							return false;
						}
						// remove current
						classie.remove(menu.querySelector('.menu__item--current'), 'menu__item--current');
						// set current
						classie.add(item, 'menu__item--current');
					};

				[].slice.call(menuItems).forEach(function(el) {
					el.addEventListener('click', setCurrent);
				});
			});

			[].slice.call(document.querySelectorAll('.link-copy')).forEach(function(link) {
				link.setAttribute('data-clipboard-text', location.protocol + '//' + location.host + location.pathname + '#' + link.parentNode.id);
				new Clipboard(link);
				link.addEventListener('click', function() {
					classie.add(link, 'link-copy--animate');
					setTimeout(function() {
						classie.remove(link, 'link-copy--animate');
					}, 300);
				});
			});
		})(window);
	</script>

<table id="tb_calc" style="display:none;">  
     <tr>
		<tr>
		<td> <p style="width:100px">标准</p></td> 
	 	<td> <input id="H1" type="text" style="width:120px" value="0" name="H1" /></td>  
        <td> <input id="M1" type="text" style="width:120px" value="0" name="M1" /></td>
		<td> <lable id="op"  name="op"></lable> </td>  
        <td> <input id="H3" type="text" style="width:120px" value="0" name="H3" /></td>  
        <td> <input id="M3" type="text" style="width:120px" value="0" name="M3" /></td>
		<td> - </td>  
		<td> <input id="H5" type="text" style="width:120px" value="0" name="H5" /></td>  
        <td> <input id="M5" type="text" style="width:120px" value="0" name="M5" /></td> 
		<td> - </td>  
		<td> <input id="H7" type="text" style="width:120px;" value="0" name="H7" /></td>  
        <td> <input id="M7" type="text" style="width:120px;" value="0" name="M7" /></td> 

        
		</tr>
		<tr>
		<td> <p style="width:100px">实际</p></td> 
		<td> <input id="H2" type="text" style="width:120px" value="" name="H1" /></td>  
        <td> <input id="M2" type="text" style="width:120px" value="" name="M1" /></td>
		<td> - </td>  
        <td> <input id="H4" type="text" style="width:120px" value="" name="H4" /></td>  
        <td> <input id="M4" type="text" style="width:120px" value="" name="M4" /></td>
		<td> - </td>  
		<td> <input id="H6" type="text" style="width:120px" value="" name="H6" /></td>  
        <td> <input id="M6" type="text" style="width:120px" value="" name="M6" /></td> 
		<td> - </td>  
		<td> <input id="H8" type="text" style="width:120px;" value="" name="H8" /></td>  
        <td> <input id="M8" type="text" style="width:120px;" value="" name="M8" /></td>
		</tr>
</table>
<div id="div_calc" style="display:none;">
	 <div id="" class="">
		<span class=""><font style="width:100px">周开:</font>&nbsp;&nbsp;<lable id="R1" name="R1" style="font-size:40px;"></lable></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<span class=""><font style="width:100px">错开:</font>&nbsp;&nbsp;<lable id="R2" name="R2" style="font-size:40px;"></lable></span>
	 </div>
	 <div class="juzhong">
		<input style="width:300px" id="opTips" type="button" value="" onclick="calc();"/>
	 </div>
</div>
	 
	 <div id="" class="juzhong">
		<font size="" color="#ff0000">建议横屏显示!</font>
	 </div>
		
<table>
<SCRIPT LANGUAGE="JavaScript">
<!--
function changeSty(){
  if(document.all.b1.className=="sty1")
    document.all.b1.className="sty2"
else
document.all.b1.className="sty1"
document.all.b1.focus();
}</SCRIPT>
		<tr>
		<tr>
		<tr style="display:none;">
		<td> <lable id="A1"  name="A1"></lable> </td>
		<td> <lable id="A2"  name="A2"></lable> </td>
		<td> <lable id="A3"  name="A3"></lable> </td>
		<td> <lable id="A4"  name="A4"></lable> </td>
		</tr>
		<tr style="display:none;">
		<td> <lable id="A5"  name="A1"></lable> </td>
		<td> <lable id="A6"  name="A2"></lable> </td>
		<td> <lable id="A7"  name="A3"></lable> </td>
		<td> <lable id="A8"  name="A4"></lable> </td>
		</tr>
    </tr>  
</table>  
<script type="application/javascript">  
    function setOp(op, opTips)  
    {  
        var tb=document.getElementById("tb_calc");  
        tb.style.display = "none";  
		var div=document.getElementById("div_calc");  
        div.style.display = "none"; 
      
	    document.getElementById("H1").value = ""; 
		document.getElementById("H2").value = ""; 
		document.getElementById("H3").value = ""; 
		document.getElementById("H4").value = ""; 
		document.getElementById("H5").value = ""; 
		document.getElementById("H6").value = ""; 
		document.getElementById("H7").value = ""; 
		document.getElementById("H8").value = "";
		document.getElementById("M1").value = "00"; 
		document.getElementById("M2").value = "00"; 
		document.getElementById("M3").value = "00"; 
		document.getElementById("M4").value = "00"; 
		document.getElementById("M5").value = "00"; 
		document.getElementById("M6").value = "00"; 
		document.getElementById("M7").value = "00"; 
		document.getElementById("M8").value = "00";
		document.getElementById("A1").innerText = "";
		document.getElementById("A2").innerText = "";
		document.getElementById("A3").innerText = "";
		document.getElementById("A4").innerText = "";
		document.getElementById("A5").innerText = "";
		document.getElementById("A6").innerText = "";
		document.getElementById("A7").innerText = "";
		document.getElementById("A8").innerText = "";
        document.getElementById("R1").innerText = "";   
		document.getElementById("R2").innerText = "";  
        document.getElementById("op").innerText = op;  
        document.getElementById("opTips").value = opTips;  
           
        tb.style.display = "block";  
		div.style.display = "block"; 
    }  
    function calc()  
    {  
		var H1  = parseInt(document.getElementById("H1").value); 
		var H2  = parseInt(document.getElementById("H2").value); 
		var H3  = parseInt(document.getElementById("H3").value); 
		var H4  = parseInt(document.getElementById("H4").value); 
		var H5  = parseInt(document.getElementById("H5").value); 
		var H6  = parseInt(document.getElementById("H6").value); 
		var H7  = parseInt(document.getElementById("H7").value); 
		var H8  = parseInt(document.getElementById("H8").value); 
		var M1  = parseInt(document.getElementById("M1").value); 
		var M2  = parseInt(document.getElementById("M2").value); 
		var M3  = parseInt(document.getElementById("M3").value); 
		var M4  = parseInt(document.getElementById("M4").value); 
		var M5  = parseInt(document.getElementById("M5").value); 
		var M6  = parseInt(document.getElementById("M6").value); 
		var M7  = parseInt(document.getElementById("M7").value); 
		var M8  = parseInt(document.getElementById("M8").value); 

	    var op = document.getElementById("op").innerText;  
        
		var A1 = "";
		var A2 = "";
		var A3 = "";
		var A4 = "";
        var R1 = ""; 
		var R2 = "";
        switch(op)  
        {  
            case '+':  
			//周一至周五 错时开放计算
                if (H1 > H2)
				{A1 = H1-H2+M1/60-M2/60;
				}else
				{A1 = eval(0);
				}
				if (H3 < H4)
				{A2 = H4-H3+M4/60-M3/60;
				}else
				{A2 = eval(0);
				}
				if (H5 > H6)
				{A3 = H5-H6+M5/60-M6/60;
				}else
				{A3 = eval(0);
				}
				if (H8 > H7)
				{A4 = H8-H7+M8/60-M7/60;
				}else
				{A4 = eval(0);
				}
				R2=A1*5+A2*5+A3*5+A4*5
			//周开放时长计算
				A5 = H4-H2+M4/60-M2/60;
				A6 = H8-H6+M8/60-M6/60;
				R1 = A5*5+A6*5;
                break;  
            case '-':  
                //周一至周日 错时开放计算
                if (H1 > H2)
				{A1 = H1-H2+M1/60-M2/60;
				}else
				{A1 = eval(0);
				}
				if (H3 < H4)
				{A2 = H4-H3+M4/60-M3/60;
				}else
				{A2 = eval(0);
				}
				if (H5 > H6)
				{A3 = H5-H6+M5/60-M6/60;
				}else
				{A3 = eval(0);
				}
				if (H8 > H7)
				{A4 = H8-H7+M8/60-M7/60;
				}else
				{A4 = eval(0);
				}
				A5 = H4-H2+M4/60-M2/60;
				A6 = H8-H6+M8/60-M6/60;
				R2=A1*5+A2*5+A3*5+A4*5+A5*2+A6*2;
			//周开放时长计算
				A5 = H4-H2+M4/60-M2/60;
				A6 = H8-H6+M8/60-M6/60;
				R1 = A5*7+A6*7;
                break;  
            case '*': ;  
                A5 = H4-H2+M4/60-M2/60;
				A6 = H8-H6+M8/60-M6/60;
				R2 = A5*5+A6*2; 
                break;  
            case '/': ;  
                z = x / y;  
                break;  
            default:  
                z = '';
				R1 = '';
        }  
        console.log(H1, H2, H3, H4, H5, H6, H7, H8, M1, M2, M3, M4, M5, M6, M7, M8, '=', R1, R2, A1, A2, A3, A4, A5, A6, A7, A8,);  
        document.getElementById("R1").innerText = R1; 
		document.getElementById("R2").innerText = R2;  
    }  
</script> 
<script>
var detectOrient = function() {
        var width = document.documentElement.clientWidth,
                height = document.documentElement.clientHeight,
                wrapper = document.getElementById("main"),
                style = "";
        if(width >= height) { // 竖屏
            style += "width:100%"; 
            style += "height:100%;";
            style += "-webkit-transform: rotate(0); transform: rotate(0);";
            style += "-webkit-transform-origin: 0 0;";
            style += "transform-origin: 0 0;";
        } else { // 横屏
            style += "width:" + height + "px;";// 注意旋转后的宽高切换
            style += "height:" + width + "px;";
            style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
            // 注意旋转中点的处理
            style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
            style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
        }
        wrapper.style.cssText = style;
    }
    window.onresize = detectOrient;
    detectOrient();
</script>
<!-错时开放时间所用计算A1-A2-A3-A4->
</body>  
</html>